<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <meta charset="utf-8">
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      div ul {margin: 10px;}
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #messages { margin-bottom: 40px }
      #master_price div {float: left; margin-right: 10px; font-size:13px;}
      #master_eth_price div {float: left; margin-right: 10px; font-size:13px;}
      #master_ltc_price div {float: left; margin-right: 10px; font-size:13px;}
      .clearfix { clear:both; }
        .yubaozhou p { margin-bottom: 10px; display: none; }
    </style>
  </head>
  <body>
  <div>
    <div style="width: 30%; float: left;">
      <ul><div><span>美元汇率:</span><input id="usd_huilv" autocomplete="off" value="7.9" /></div></ul>
      <ul><div><span>本金数量:</span><input id="m" autocomplete="off" value="10000" /></div></ul>
      <ul><div><span>已购币数量:</span><input id="coinnum" autocomplete="off" value="0" /></div></ul>
      <ul><div><button style="padding: 10px;" id="btn_start">StartUp!</button></div></ul>
      <ul><div><textarea style="height: 80px;width: 200px;" id="alert_rule">{"bter_xcp2btc_benefit" : "lte_7.2"}</textarea></div></ul>
      <ul><div><input type="hidden" id="open_alert" value="close"><button style="padding: 5px;" id="btn_open_alert">打开提醒</button><button style="padding: 5px;" id="btn_stop_alert">停止音乐</button></div></ul>
      <ul><div class="yubaozhou"><p>顶礼本师释迦摩尼佛,顶礼文殊智慧勇士</p>
        <p>雨宝咒:</p>
        <p>曩(nǎng)谟(mó)婆(pó)誐(ě)嚩(mó)帝(dì)</p>
        <p>嚩(mó)日(rì)啰(luo)驮(tuó)啰(luo)</p>
        <p>娑(suō)誐(ě)啰(luo)捏(niē)</p>
        <p>具(jù)洒(sǎ)耶(yē)</p>
        <p>怛(dá)他(tā)蘖（nie）多(duō)野(yě)</p>
        <p>怛(dá)儞(nǐ)也(yě)他(tā)</p>
        <p>唵(hong)素(sù)噜(lū)闭(bì)</p>
        <p>跋(bá)捺(nà)啰(luo)嚩(mó)</p>
        <p>底(dǐ)矒(méng)誐(ě)</p>
        <p>阿(ā)左(zuǒ)隶（li）</p>
        <p>阿(ā)左(zuǒ)跛(bǒ)隶（li）</p>
        <p>嗢(wà)伽(gā)跢(duò)儞(nǐ)</p>
        <p>嗢(wà)陛(bì)娜(nà)儞(nǐ)</p>
        <p>萨(sà)写(xiě)嚩(mó)底(dǐ)</p>
        <p>驮(tuó)娘(niáng)嚩(mó)底(dǐ)</p>
        <p>驮(tuó)曩(nǎng)嚩(mó)底(dǐ)</p>
        <p>室(shì)唎(lī)么(me)底(dǐ)</p>
        <p>钵(bō)啰(luo)婆(pó)嚩(mó)底(dǐ)</p>
        <p>阿(ā)么(me)隶（li）</p>
        <p>尾(wěi)么(me)黎(lí)噜(lū)噜(lū)</p>
        <p>素(sù)噜(lū)闭(bì)</p>
        <p>尾(wěi)么(me)黎(lí)</p>
        <p>阿(ā)娜(nà)多(duō)悉(xī)帝(dì)</p>
        <p>尾(wěi)娜(nà)多(duō)悉(xī)帝(dì)</p>
        <p>尾(wěi)湿(shī)嚩(mó)计(jì)始(shǐ)</p>
        <p>鸯(yāng)矩(jǔ)隶（li）</p>
        <p>矒(méng)矩(jǔ)隶（li）</p>
        <p>地(dì)地(dì)冥(míng)</p>
        <p>度(dù)度(dù)冥(míng)</p>
        <p>跢(duò)跢(duò)隶（li）</p>
        <p>多(duō)啰(luo)多(duō)啰(luo)嚩(mó)日(rì)隶（li）</p>
        <p>阿(ā)韈（wa）跢(duò)儞(nǐ)</p>
        <p>步(bù)计(jì)屋(wū)计(jì)</p>
        <p>咤(zhà)计(jì)咤(zhà)计(jì)</p>
        <p>韈（wa）啰(luo)洒(sǎ)尼(ní)</p>
        <p>儞(nǐ)涩(sè)播(bō)娜(nà)儞(nǐ)</p>
        <p>婆(pó)誐(ě)挽(wǎn)</p>
        <p>嚩(mó)日(rì)啰(luo)驮(tuó)啰(luo)</p>
        <p>娑(suō)誐(ě)啰(luo)</p>
        <p>捏(niē)具(jù)衫(shān)</p>
        <p>怛(dá)他(tā)蘖(niè)跢(duò)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)么(me)啰(luo)娑(suō)么(me)啰(luo)</p>
        <p>萨(sà)嚩(mó)怛(dá)他(tā)孽(niè)跢(duò)萨(sà)底(dǐ)也(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>僧(sēng)伽(gā)萨(sà)底(dǐ)也(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>怛(dá)咤(zhà)怛(dá)咤(zhà)</p>
        <p>布(bù)啰(luo)布(bù)啰(luo)</p>
        <p>布(bù)啰(luo)也(yě)布(bù)啰(luo)野(yě)</p>
        <p>婆(pó)啰(luo)婆(pó)啰(luo)</p>
        <p>婆(pó)啰(luo)抳(nǐ)</p>
        <p>素(sù)矒(méng)誐(ě)丽(lì)</p>
        <p>扇(shàn)跢(duò)么(me)底(dǐ)</p>
        <p>瞢(méng)誐(ě)攞(luǒ)么(me)底(dǐ)</p>
        <p>钵(bō)啰(luo)婆(pó)么(me)底(dǐ)</p>
        <p>摩(mó)诃(hē)么(me)底(dǐ)</p>
        <p>素(sù)婆(pó)捺(nà)啰(luo)嚩(mó)底(dǐ)</p>
        <p>阿(ā)蘖(niè)蹉(cuō)阿(ā)蘖(niè)蹉(cuō)</p>
        <p>三(sān)么(me)野(yě)么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>阿(ā)驮(tuó)啰(luo)拿(ná)</p>
        <p>么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>钵(bō)啰(luo)婆(pó)嚩(mó)么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>驮(tuó)哩(lǐ)底(dǐ)么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>尾(wěi)惹(rě)野(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>萨(sà)嚩(mó)萨(sà)</p>
        <p>怛(dá)嚩(mó)尾(wěi)惹(rě)野(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
      </div></ul>
    </div>
    <div style="float: left; padding: 10px; width:70%">
      <ul id="messages" >
          <div><label>最后更新时间:</label><span id="last_datetime"></span></div>
          <div class="clearfix"></div>
        <div id="master_price" style="margin-top: 10px; float: left" >
            <div><label>bter-BTC卖出价:</label><span id="bter_btc_sell_price"></span></div>
            <div><label>bter-XCP买入价:</label><span id="bter_xcp_buy_price"></span></div>

        </div>
          <div class="clearfix"></div>
          <div id="master_eth_price" style="margin-top: 10px;float: left" >
              <div><label>BTCE-ETH价格:</label><span id="btce_eth_price"></span></div>
              <div><label>Biter-ETH价格:</label><span id="biter_ETH_buy_price"></span></div>
              <div><label>coinone-ETH价格:</label><span id="coinone_eth_price"></span></div>
        </div>
        <div class="clearfix"></div>
          <div id="master_ltc_price" style="margin-top: 10px;float: left" >
              <div><label>BTCE-LTC价格:</label><span id="btce_ltc_price"></span></div>
              <div><label>Biter-LTC价格:</label><span id="biter_LTC_buy_price"></span></div>
              <div><label>okcoin_LTC价格:</label><span id="okcoin_ltc_price"></span></div>
        </div>
          <div class="clearfix"></div>
          <div style="margin-top: 10px;float: left">
              <ul id="bittrex_price_info">
              </ul>
              <ul id="bittrex_exchange_btc_num">
              </ul>
              <ul id="poloniex_price_info">
              </ul>
              <ul id="poloniex_exchange_btc_num">
              </ul>
          </div>
          <div class="clearfix"></div>
          <video width="0" height="0" preload="auto" loop="loop" id="alertvideo">
            <source src="../static/music/HalfwayHome.ogg" type="video/ogg">
          </video>
      </ul>
    </div>
  </div>
    <script src="../static/socket.io.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var mpageobj = {};
        mpageobj.alertevent = function (msgobj) {
            var listenList = JSON.parse($("#alert_rule").val());
            $.each(listenList,function ( key, value ) {
                tmp  = value.split("_");
                opt = tmp[0];
                alert_val = parseFloat(tmp[1]);
                cur_val = parseFloat(msgobj[key]);
                switch (opt){
                    case "glt":
                            if (cur_val >= 0.0 && cur_val >= alert_val){
                                $("#alertvideo").get(0).play();
                            }
                            break;
                    case "lte":
                            if (cur_val >= 0.0 && cur_val <= alert_val){
                                $("#alertvideo").get(0).play();
                            }
                            break;
                }
            });
        }
      $(function () {
        //  var socket = io('http://127.0.0.1:8000');
        var socket = io('{{host_url}}');
        $("#btn_start").click(function () {
          socket.emit('chat message', $('#m').val() + "," + $('#usd_huilv').val() + "," + $('#coinnum').val());
          //$('#m').val('');
          return false;
        });

        $("#btn_open_alert").click(function () {
            if($("#open_alert").val() == "close"){
                $("#open_alert").val("open");
                $(this).text("关闭提醒");
            }else if ($("#open_alert").val() == "open"){
                $("#open_alert").val("close");
                $(this).text("打开提醒");
                $("#alertvideo").get(0).pause();
            }
        });
          
          $("#btn_stop_alert").click(function () {
              $("#alertvideo").get(0).pause();
          });

        socket.on('chat message', function(msg){
            $("#bittrex_price_info").empty();
            $("#bittrex_exchange_btc_num").empty();
            $("#poloniex_price_info").empty();
            $("#poloniex_exchange_btc_num").empty();
            obj = JSON.parse(msg);
            $("#last_datetime").text(obj["last_datetime"]);
            $.each( obj, function( key, value ) {
              //$('#'+ key).text(value);
                if(key.indexOf("benefit")>=0 && key.indexOf("bittrex") >= 0){

                    $("#bittrex_price_info").append('<li><label>' + key +':</label>&nbsp;<span id="'+ key +'">'+value+'</span></li>');
                }

                if(key.indexOf("bittrex_num")>=0 && key.indexOf("bittrex") >= 0){
                    $("#bittrex_exchange_btc_num").append('<li><label>' + key +':</label>&nbsp;<span id="'+ key +'">'+value+'</span></li>');
                }

                if(key.indexOf("benefit")>=0 && key.indexOf("poloniex") >= 0){
                    $("#poloniex_price_info").append('<li><label>' + key +':</label>&nbsp;<span id="'+ key +'">'+value+'</span></li>');
                }

                if(key.indexOf("poloniex_num")>=0 && key.indexOf("poloniex") >= 0){
                    $("#poloniex_exchange_btc_num").append('<li><label>' + key +':</label>&nbsp;<span id="'+ key +'">'+value+'</span></li>');
                }


            });
            if ($("#open_alert").val() == "open") {
                mpageobj.alertevent(obj);
            }
          //$('#messages').html($('<li>').html(msg));
          //window.scrollTo(0, document.body.scrollHeight);
            window.setTimeout(function () {
                socket.emit('chat message', $('#m').val() + "," + $('#usd_huilv').val() + "," + $('#coinnum').val());
            },2000);

        });
      });
    </script>
  </body>
</html>